<!--
 * @Description:input点击隐藏文字
 * @Author: Sun
 * @Date: 2019-07-01 20:05:50
 * @LastEditors: Sun
 * @LastEditTime: 2019-07-13 23:21:42
 -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>input点击隐藏文字</title>
  <style>
	 input{
		 color: #cccccc;
		 caret-color:red;
	 }
	 #select{
		 color: #000;
	 }
	</style>
	<script>
		window.onload = function () {
			function $(id) {
				return document.getElementById(id)
			}
			$("txt").focus() //表单自动获取焦点
			//鼠标经过选择表单
			$("txt").onfocus = function () {
				if ($("txt").value == "请输入文字") {
					txt.value = "";
					txt.style.color = "#333"
				}
			}

			$("txt").onblur = function () {
				if ($("txt").value == "") {
					$("txt").value = "请输入文字"
					$("txt").style.color = "#ccc"
				}
			}

		  let sele= document.getElementById("select")
			sele.onmouseover=function(){
				this.select()  //鼠标经过选择表单
			}

		}
	</script>
</head>

<body>
	<div>
		onfocus 获取焦点 <br>
		onblur 失去焦点 <br>
		<input type="text" value="请输入文字" id="txt">
		<button>搜索</button>
		<!-- 鼠标经过选择表单 -->
		鼠标经过选择表单P：<br>
		<input type="text" value="鼠标经过选择表单P" id="select">
	</div>
</body>

</html>